<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            overflow-y: scroll;
        }

        img {
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class='img-item' src="./flower.jpg" data-src="./flower.jpg">
        <img class='img-item' src="" data-src="./flower.jpg">
        <img class='img-item' src="" data-src="./flower.jpg">
        <img class='img-item' src="" data-src="./flower.jpg">
        <img class='img-item' src="" data-src="./flower.jpg">
        <img class='img-item' src="" data-src="./flower.jpg">
        <img class='img-item' src="" data-src="./flower.jpg">
        <img class='img-item' src="" data-src="./flower.jpg">
        <img class='img-item' src="" data-src="./flower.jpg">
    </div>
    <script>
              // IntersectionObserver
        let viewHeight = window.innerHeight
        function lazyLoad() {
            const viewHeight = document.body.clientHeight
            const images = document.querySelectorAll('img[data-src]')
            console.log(images)
            images.forEach(img => {
                console.log(img)
                let rect = img.getBoundingClientRect()
                if (rect.top < viewHeight && rect.bottom >= 0) {
                    console.log('111', img.getAttribute('data-src'))
                    img.src = img.getAttribute('data-src')
                    console.log(img.src)
                    img.remove('dataset')
                }
            })
        }
        lazyLoad()
        window.addEventListener('scroll', lazyLoad)
    </script>
</body>

</html>